<!--
 * @Author: zi.yang
 * @Date: 2021-03-11 21:03:56
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-03-20 21:53:32
 * @Description: 搜索结果呈现页
 * @FilePath: \vue-music\src\components\view\search-result.vue
-->
<template>
  <div class="search-result">
    <div v-if="searchResult === null">
      请您先搜索音乐！
    </div>
    <div v-else class="search-result-item" v-for="item in searchResult" :key="item.id">
      <div class="search-result-word">
        <div>{{ item.name }}</div>
        <div>{{ item.artists[0].name }} - {{ item.album.name }}</div>
      </div>
      <i class="iconfont iconPlay"></i>
    </div>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive } from '@vue/composition-api';

type tResult = {
  result:Object
}

export default {
  name: 'search-result',
  props: ['result'],
  // eslint-disable-next-line no-undef
  setup(props:Readonly<{result?: tResult}>) {
    // 因为每次只会呈现一个结果，所以不用实时监听props的变化
    const state = reactive({
      searchResult: props.result,
    });
    return { ...toRefs(state) };
  },
};

</script>

<style scoped>
#app {
  display: flex;
  flex-direction: column;
  justify-content: center;

  font-size: '14px';
}

.search-result {
  display: flex;
  flex-direction: column;

  padding: 0px 15px 0 15px;

  border-top: 1.5px solid #ddd;
}

.search-result > .search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  padding: 7px 0 5px 0;

  border-bottom: 1px solid #eee;
}
.search-result > .search-result-item > .search-result-word{
  cursor: pointer;
}
.search-result > .search-result-item > .search-result-word > div:nth-of-type(1) {
  margin: 3px 0;

  color: royalblue;

  font-size: 14px;
}
.search-result > .search-result-item > .search-result-word > div:nth-of-type(2) {
  color: #666;

  font-size: 11px;
}

.search-result > .search-result-item > i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 21px;
  padding-left: 3px;

  cursor: pointer;

  color:#333;
  border: 1px solid #333;
  border-radius: 15px;
}
</style>
